<template>
	<view>
		<Header title="订单评价" />
		<view class="" style="height: 180rpx;"></view>
		<view class="caozuo_box">
			<view class="" style="padding: 40rpx;">
				<view class="caozuo_top">
					<!-- <image src="@/static/png/orende.png" mode="aspectFill"></image> -->
					<view>{{id}}</view>
				</view>
				<view class="caozuo_cunt">您对本次服务满意吗？</view>
				<view class="caozuo_pin">
					<u-rate :count="count" v-model="value" size='40' activeColor='#F9A41F'></u-rate>
				</view>
				<view class="textarea_box">
					<textarea class="textarea" v-model="message" placeholder="期待您的评价..." maxlength="100"
						@input="descInput" style="font-size: 24rpx;">
						</textarea>
					<view class="num">
						<view class="">
							{{ message.length }}/100
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="btn">提交</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				count: 5,
				value: 4,
				message: '',
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			descInput(e) {
				console.log(e.detail.value.length, '输入的字数')
			},
			async btn() {
				let that  = this 
				let res = await await this.$api.request('manage/evaluate', 'get', {
					id: this.id,
					score: this.value * 1,
				 	evaluate: this.message
				 })
				
				if (res.code == 200) {
					uni.showToast({
						title: '评价成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/my/order/orderDetail?id=' + that.id
						});
					},1000)
				}
			}
		}
	}
</script>

<style>
	.num {
		text-align: right;
		color: gray;
		margin-top: -100rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		color: #999999;
	}

	.btn {
		width: 690rpx;
		height: 90rpx;
		background-color: #DC1010;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;
	}

	.textarea_box {
		padding: 20rpx;
		background-color: #DC1010;
		width: 600rpx;
		height: 240rpx;
		margin-top: 32rpx;
		border-radius: 10rpx;
	}
	textarea {
			font-size: 28rpx;
			line-height: 45rpx;
			width: 590rpx;
			height: 240rpx;
		}
	.caozuo_pin {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.caozuo_cunt {
		text-align: center;
		font-size: 32rpx;
		margin-top: 70rpx;
	}

	.caozuo_top {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.caozuo_top image {
		width: 31rpx;
		height: 34rpx;
		margin-right: 15rpx;
	}

	.caozuo_box {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-left: 30rpx;

	}

	page {
		background-color: #F7F9FB;
	}
</style>